<template>
	<view>
		<view class="col-cutoff"></view>
		<view class="column-head">
			<view class="column-head-left">
				<view class="title-sign"></view>
				<text class="title-text">{{title}}</text>
			</view>
			<image v-if="isScan" class="column-scan" src="/static/gen_qr/icon_scan@2x.png" @click="onScanClick"></image>
		</view>

		<view class="column-cutoff"></view>

		<slot name="column-content"></slot>
	</view>
</template>

<script>
	import {
		uploadFileUrl,
		getQRData
	} from "@/service/services.js"
	export default {
		props: {
			title: {
				type: String
			},

			entryData: {
				type: Array
			},

			isScan: {
				type: Boolean,
				default () {
					return false;
				}
			},

			groupValue: {
				type: String,
				default () {
					return '';
				}
			},

			qrKey: {
				type: String,
				default () {
					return '';
				}
			},

			qrGroup: {
				type: String,
				default () {
					return '';
				}
			},
			
			entity: {
				type: String,
				default () {
					return '';
				}				
			}
		},


		data() {
			return {
				scanQrCode:''
			};
		},

		watch:{
			isScan(val) {
				console.log("watch isScan = " + val)
			},
			
			qrKey(val) {
				console.log("watch qrKey = " +  val)
				if(val)
				console.log("watch qrKey = " +  val.length)
			},
			
			qrGroup(val) {
				console.log("watch qrGroup = " + val)
				if(val)
					console.log("watch qrGroup = " + val.length)
			}
		},

		onLoad(option) {
			console.log("isScan :"  + this.isScan )
		},
		
		methods:{
			onScanClick() {
				let _self = this
				// #ifdef APP-PLUS
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						_self.scanQrCode = res.result;
						// _self.bindScanChange();
						_self.requireQRCodeContent();
					}
				});
				// #endif

				// #ifdef H5
				if(this.entity == "WeldMouth")
					_self.scanQrCode = `{"entity":"WeldMouthEntity","id":"2"}`
				else if(this.entity == "PrePipe")
					_self.scanQrCode = `{"entity":"PipeEntity","id":"2"}`
				else if(this.entity == "NextPipe")
					_self.scanQrCode = `{"entity":"PipeEntity","id":"2"}`
					
					
				_self.requireQRCodeContent();
				// _self.bindScanChange();
				// #endif
			},
			
			requireQRCodeContent() {
				let _self = this;
				let tempObj = JSON.parse(this.scanQrCode);
				getQRData(tempObj).then(res => {
					console.log(res)
					_self.$emit("onScanFinish",_self.groupValue,_self.qrKey,_self.qrGroup, res.data);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.column-head {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 38upx 30upx 36upx 30upx;

		.column-head-left {
			display: flex;
			flex-direction: row;
			align-items: center;

			.title-sign {
				width: 8upx;
				height: 38upx;
				background: #008EFE;
				border-radius: 3upx;
			}

			.title-text {
				margin-left: 12upx;
				font-size: 32upx;
				color: #4A4A4A;
			}
		}

		.column-scan {
			width: 45upx;
			height: 45upx;
			padding: 0upx;
		}

	}

	.column-cutoff {
		width: 100%;
		height: 1px;
		background: #F0F1F3;
	}

	.col-cutoff {
		width: 100%;
		height: 20upx;
		background-color: #F5F5F5;
	}
</style>
